<div>
  <div>
    <div>
      <label class="ml5 f-size24">
        Json Format
      </label>
    </div>
    <div class="bgcolor-code p10 vcenter" style="height:calc(100vh - 200px);">
      <div nz-row>
        <div nz-col [nzSpan]="1" style="width: 40px;">
          <textarea #line id="line" nz-input [(ngModel)]="lines"
                    class="line"
                    wrap="off"
                    readonly>
          </textarea>
        </div>
        <div nz-col [nzSpan]="20" class="pl5">
          <textarea #text nz-input spellcheck="false"
                    class="text" (scroll)="scroll($event)"
                    placeholder="请输入要格式化的json"
                    [(ngModel)]="jsonStr" (ngModelChange)="textChange()"
                    wrap="off">
          </textarea>
        </div>
        <div nz-col [nzSpan]="2" class="p20 center">
          <button class="mt10 w100" nz-button nzSize="small" nzGhost
                  (click)="formatJson()" nzType="primary">Format
          </button>
          <button class="mt20 w100" nz-button nzSize="small" nzGhost
                  (click)="viewStr()" nzType="primary">ViewString
          </button>

          <button class="mt20 w100" nz-button nzSize="small" nzGhost
                  (click)="viewTs()" nzType="primary">View Ts
          </button>

          <button class="mt20 w100" nz-button nzSize="small" nzGhost
                  ngxClipboard [cbContent]="jsonStr"
                  (cbOnSuccess)="copySuccess()" nzType="primary">Copy
          </button>

          <button class="mt20 w100" nz-button nzSize="small" nzGhost
                  (click)="viewSample()" nzType="primary">Json Sample
          </button>

          <button class="mt20 w100" nz-button nzSize="small" nzGhost
                  (click)="clear()" nzType="primary">Clear
          </button>

          <div class="mt40 center w100">
            <label class="f-size16" [ngClass]="formatResult=='Valid'?'color-green':'color-red'">{{formatResult}}</label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <nz-modal [(nzVisible)]="showCode" nzTitle="TsCode"
              [nzCancelText]="null" nzWidth="900"
              (nzOnCancel)="closeModal()"
              (nzOnOk)="closeModal()">
      <textarea nz-input class="wp100 bgcolor-code scrolly" spellcheck="false"
                style="height: calc( 100vh - 320px);border:none;box-shadow: none;">{{tsCode}}</textarea>
      <div>
        <label class="mt10 ml10 f-size12">Not all code is useful, the generated code is for reference only</label>
      </div>
    </nz-modal>
  </div>
</div>


